<script setup>
// 1、导入watch
import { ref, watch, reactive, watchEffect } from 'vue'

const age = ref(12)
function changeAge() {
  age.value = 33
}

const user = reactive({
  name: "张三",
  age: 18
})
function changeUser() {
  user.name = "王五",
    user.age = 33
}
// 2、监听变量 wathc(监听对象,(新值,旧值)=>{逻辑代码})
watch(age, (newAge, oldAge) => {
  // 这里会打印两次，为什么？因为触发了两次对象值变化事件
  console.log("旧的：" + oldAge + " ,新的：" + newAge);
  if (newAge > 30) {
    age.value = 29
  }
})
// 3、watch无法监听对象属性的详细信息，只能获取到对象属性的最新值
watch(user, (newAge, oldAge) => {
  console.log("旧的：" + oldAge.name + " ,新的：" + newAge.name);
})
// 4、watchEffect在页面初始化时候就开始收集所有对象信息，不需要指定监听对象
watchEffect(() => {
  console.log(user.name);
})
</script>

<template>
  <div>
    <h2>age:{{age}}</h2>
    <button @click="changeAge">改变age</button>
  </div>
  <div>
    <h2>age:{{user}}</h2>
    <button @click="changeUser">改变user</button>
  </div>
</template>